<template>
  <!-- 面包屑导航组件 -->
  <div class="bread">
    <b>当前位置：</b>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <template v-if="tos.length > 0">
        <el-breadcrumb-item
          v-for="(to, index) in tos"
          :key="index"
          :to="to.route"
        >
          {{to.content}}
        </el-breadcrumb-item>
      </template>
      <template v-else>
        <el-breadcrumb-item
          v-for="(content, index) in contents"
          :key="index"
          :to="{ path: content.path || '/' }"
        >
          {{content.meta.title}}
        </el-breadcrumb-item>
      </template>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  name: 'BreadCrumb',
  props: {
    tos: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      contents: this.$route.matched
    }
  }
}
</script>

<style lang="scss" scoped>
.bread {
  font-size: 15px;
  display: flex;
  padding: 10px 0;
  height: $bread_height;
  line-height: $bread_height;
  .icon {
    font-size: 23px;
    height: $bread_height;
    line-height: $bread_height;
  }
  .el-breadcrumb {
    height: $bread_height;
    line-height: $bread_height;
  }

  .el-breadcrumb ::v-deep * {
    color: #000 !important;
  }
}
</style>
